<template>
 <div
    style="position:fixed;right: 170px;top:220px;border:1px solid #123123;z-index: 100;"
  >
    <div>点我可以拖拽</div>
    <!--目录导航-->
    <div
      v-for="(anchor, index) in titles"
      :key="index"
      :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
      style="cursor: pointer"
      @click="handleAnchorClick(anchor)"
    >
      <!--目录连接-->
      <a style="cursor: pointer">{{ anchor.title }}</a>
    </div>
  </div>
</template>

<script>

</script>

<script setup>

  const props = defineProps({
    titles: Object
  })

  
  const handleAnchorClick = (anchor) => {
    const { lineIndex } = anchor

    const heading = preview.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`)

    if (heading) {
      preview.value.scrollToTarget({
        target: heading,
        scrollContainer: window,
        top: 60
      })
    }
  }

</script>